<script setup >
import { useCounterStore } from '@/stores/useCounterStore';
import { useTodos2 } from "@stores/useTodos2.js";
import { useUsers } from "@stores/useUsers.js";

const useCounter = useCounterStore();
const { count } = storeToRefs( useCounter );//变量需要从storeToRefs中解构实例获取
const { increment } = useCounter;//函数可以直接从store中获取

const todosStore = useTodos2();
const {
  filter,
  filterTodos
} = storeToRefs( todosStore );
const { addTodo } = todosStore;


// 默认情况下，state subscription 会被绑定到添加它们的组件上 (如果 store 在组件的 setup() 里面)。
// 这意味着，当该组件被卸载时，它们将被自动删除。
// 如果你想在组件卸载后依旧保留它们，请将 { detached: true } 作为第二个参数，以将 state subscription 从当前组件中分离：
todosStore.$subscribe( ( mutation, state ) => {
  console.log( 'mutation', mutation );
  console.log( 'state', JSON.stringify( state ) );
}, {
  flush : 'sync',
  detached : true,
} );


const newTodoText = ref( '' );
const submit = () => {
  if ( !newTodoText.value ) return;
  addTodo( newTodoText.value );
  newTodoText.value = '';
};

const userStore = useUsers();
const { users } = storeToRefs( userStore );
const { getUsers } = userStore;
console.log( 'users', userStore.secret)
console.log( 'store', userStore.hello)
console.log( 'shared', userStore.shared)

onMounted( () => {
  getUsers();
} );
</script >

<template >
  <div >
    {{ count }}
    <AButton @click="increment" >自增1</AButton >
  </div >
  
  <div style="width: 800px;" >
    <div >
      <ARadioGroup v-model:value="filter" >
        <ARadio value="all" >All</ARadio >
        <ARadio value="finished" >Finished</ARadio >
        <ARadio value="unfinished" >Unfinished</ARadio >
      </ARadioGroup >
    </div >
    <div v-for="todo in filterTodos" :key="todo.id" >
      <ACheckbox v-model:checked="todo.done" >
        {{ todo.text }}
      </ACheckbox >
    </div >
    <div style="width: 400px;" >
      <AInputGroup compact >
        <AInput v-model:value="newTodoText" placeholder="New Todo" style="width: calc(100% - 200px)" />
        <AButton @click="submit" >Add</AButton >
      </AInputGroup >
    </div >
  </div >
  
  <div v-for="item in users" :key="item.id">
    <span style="margin-right: 10px;">【{{ item.username }}】</span>
    <span style="margin-right: 10px;color:gray">{{ item.name }}</span>
    <span>{{ item.email }}</span>
  </div >
  
  
</template >

<style scoped >

</style >